<template>
  <div style="padding: 10px;">
    <div class="page-example3" :style="{'height':height,'width':width,minHeight:'200px'}">
      <vue-seamless-scroll :data="listData" :class-option="defaultOption">
        <div class="ul-scoll">
          <div v-for="(item, index) in listData" :key='index' class="flex_box_item">
            <div class="box_item" :style="{flex:3}">
              {{ item.equipmentName }}
            </div>
            <div class="box_item">
              {{ item.equipmentCode }}
            </div>
            <div class="box_item">
              {{ item.statusName }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll/src'
import {getStyleByEl} from "@/utils/dom/get_dom_style";
import {get_board_data} from "@/api/cockpit/map";

export default {
  name: "scroll_list_auto",
  props: {
    data_list: [],
    demo_class: ""
  },
  data() {
    // 这里存放数据
    return {
      listData: [],
      height: "",
      width: ""
    }
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  methods: {
    get_style_dom(dom) {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    },
    init() {
      const {height, width} = this.get_style_dom(this.demo_class)
      this.height = height;
      this.width = width;
      this.get_data_list()
    },
    async get_data_list() {
      this.listData = [];
      const res = await get_board_data();
      if (res.code === 1) {
        this.listData = res.data.runStatus ? res.data.runStatus : null
      }
    }
  },
  mounted() {
    // setTimeout(()=>{
    this.init()
    // },1000)
  },
  components: {
    vueSeamlessScroll
  },
}
</script>

<style scoped lang="scss">
.page-example3 {
  overflow: hidden;
  border: 1px dashed #283dff;


  .ul-scoll {
    .flex_box_item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.8rem;
      color: #3a7bd5;
      .box_item{
        flex: 1;
        display: flex;
        justify-content: center;
        //padding: 0 10px;
        height: 2rem;
      }
    }
  }
}
</style>
